<template>
  <div>
    <Header :active-index="3"/>
    <div class="timeline">
      <el-timeline reverse>
        <el-timeline-item v-for="(item,index) in timeLineList" :key="index" :timestamp="item.year+' 共'+item.count+'条'" placement="top">
          <el-card v-for="article in item.articleList" :key="article.articleId" style="margin: 5px">
            <div slot="header">
              <h3 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><a :href="`article/detail?articleId=${article.articleId}`">{{article.title}}</a></h3>
            </div>
            <p><b>{{article.author}}</b> 发表于 <b>{{article.applyTime}}</b></p>
          </el-card>
          <div v-if="item.articleList.length<item.count" style="display: flex;justify-content: right">
            <el-link type="warning" @click="getArticleByYear(item.year,1)">加载更多...</el-link>
          </div>
          <div v-if="item.articleList.length===item.count && item.count > 3">
            <el-link type="warning" @click="getArticleByYear(item.year,2)">收起</el-link>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  name: 'TimeLine',
  components: { Header, Footer },
  data () {
    return {
      timeLineList: []
    }
  },
  methods: {
    getTimeLine () {
      this.$http.get('/api/timeline').then(data => {
        this.timeLineList = [...data.data]
      })
    },
    getArticleByYear (year, type) {
      if (type === 1) {
        this.$http.get(`/api/timeline/${year}`).then(data => {
          for (const item of this.timeLineList) {
            if (item.year === year) {
              item.articleList = [...data.data]
            }
          }
        })
      } else {
        for (const item of this.timeLineList) {
          if (item.year === year) {
            item.articleList.splice(3)
          }
        }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.getTimeLine()
    })
  }
}
</script>

<style scoped>
.timeline{
  padding-top: 90px;
  width: 780px;
  margin: 0 auto;
  min-height: calc(100vh - 170px);
}
a{
  color: black;
  text-decoration: none;
}
a:hover{
  color: cornflowerblue;
}
</style>
